<template>
  <div class="home">
    <el-carousel height="calc(100vh - 60px)">
      <el-carousel-item v-for="item in list" :key="item" :style="{ 'background-image': `url(${item.cover})` }"
        class="carousel-item">
        <h1>{{ item.productName }}</h1>
        <div>{{ item.describe }}</div>
        <div>{{ item.detail }}</div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import { getList } from './api'
import { ref, onMounted } from 'vue'
const list = ref([])
// 获取产品列表
const loadGetList = async () => {
  const res = await getList()
  console.log('res', res)
  list.value = res.data.data
}

onMounted(() => {
  loadGetList()
})
</script>
<style lang="less" scoped>
.carousel-item {
  background-size: 100% 100%;
}
</style>